<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            border: 1px solid;
        }


        .randomColor{
            animation: ani_randomColor 0.1s linear infinite;
        }
        /*.randomColor{*/
            /*/!* animation:  *!/*/
            /*animation-name: ani_randomColor;*/
            /*/!* 持续的时间 *!/*/
            /*animation-duration: 0.1s;*/
            /*/!* 速度曲线 *!/*/
            /*animation-timing-function: linear;*/
            /*/!* 循环次数 infinite 死循环 *!/*/
            /*animation-iteration-count: infinite;*/
            /*/!* 方向 alternate 先正后反 *!/*/
            /*animation-direction: alternate;*/
        /*}*/


        @keyframes ani_randomColor {
            0%{
                background-color: red;
            }

            50%{
                background-color: black;
            }

            100%{
                background-color: green;
            }
        }

    </style>

</head>
<body>
<canvas width="600" height="600"></canvas>
<button>出来吧</button>
<script>
    var cas=document.querySelector("canvas");
    var btn=document.querySelector("button");
    var ctx=cas.getContext("2d");

    var arr=[];
    var isDraw=false;
    cas.onmousedown=function(){
        isDraw=true;
        ctx.beginPath();
        //将重新开启路径的时候做个标记存放到数组中
        arr.push(0);
    }
    cas.onmousemove=function(e){
        if(!isDraw){
            return;
        }
        ctx.lineTo(e.offsetX, e.offsetY)
        ctx.stroke();
        //将每个点的坐标存放到一个数组中
        arr.push( {x: e.offsetX, y: e.offsetY});
    }
    cas.onmouseup=function(){
        isDraw=false;
    }
    cas.onmouseout=function(){
        isDraw=false;
    }


    btn.onclick=function(){
        //点击按钮给body里边所有类的数组中添加一个类。这个类是背景颜色动画随机改变
        document.body.classList.add("randomColor");


        //清除前面画的所有
        ctx.clearRect(0,0,cas.width,cas.height)
        //点击出来吧按钮将数组中所有的点一个一个拿出来描出来
        var timer=setInterval(function(){
            //拿到每个点的坐标出来
            var point=arr.shift();
            //如果拿到的是0的话让它重新开启路径
            if(point==0){
                ctx.beginPath()
            }
            ctx.lineTo(point.x,point.y)
            ctx.stroke();

            //当数组里边所有的数都拿出来了没有了的话清楚定时器
            if(arr.length==0){
                clearInterval(timer);
                document.body.classList.remove("randomColor");
            }

        },10)

    }


</script>

</body>
</html>